<template>
	<view class="redCode">
		<view class="item">
			兑换号码
		</view>
		<view class="item">
			<u-code-input v-model="form.exchange_number" :maxlength="9" space="3" size="25"></u-code-input>
		</view>
		<view class="item">
			兑换码密码
		</view>
		<view class="item">
			<u-code-input v-model="form.code" :maxlength="6" space="3" size="25"></u-code-input>
		</view>
		<view class="item">
			<u-button class="custom-style" text="完成兑换" customStyle="background-color: #2CB9A4;color: #fff;width: 70%;border-radius: 30px;margin-top: 30rpx;" @click="submit"></u-button>
		</view>
	</view>
</template>

<script>
	import {
		exchange
	} from '@/request/api.js'
	export default {
		data() {
			return {
				value1: '',
				form:{
					exchange_number:'',
					code:''
				}
			}
		},
		methods: {
			async submit(){
				//验证码只能输入6位或者9位
				console.log(this.form.exchange_number.length,this.form.code.length,111)
				if(this.form.exchange_number.length!== 6&&this.form.exchange_number.length!== 9){
					uni.showToast({
						icon:'none',
						title:'请输入正确的兑换号码'
					})
					return false;
				}
				if(this.form.code.length!== 6 ){
					uni.showToast({
						icon:'none',
						title:'请输入正确的兑换密码'
					})
					return false;
				}
				let res = await exchange(this.form)
				uni.showToast({
					icon:'none',
					title:'兑换成功'
				})
				this.form.code = ''
				this.form.exchange_number = ''
				uni.navigateTo({
					url:'/my_pages/myCard/myCard'
				})
			}
		}
	}
</script>
<style>
	page {
		background: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	::v-deep .u-code-input{
		overflow: scroll !important;
		    // justify-content: center;
	}
	.redCode {
		display: flex;
		justify-content: flex-start;
		padding: 40rpx;
		color: #2CB9A4;
		flex-direction: column;
		background: #fff;
		margin: 40rpx;
		border-radius: 25rpx;

		.item {
			margin-top: 30rpx;
		}

	}
</style>